<template>
    <div id="classify">
        <div class="leftselect">
            <ul >
                <li v-for="(item,index) in classify" :key="index" @click="selectStyle (index) " :class="{active:index===number}" >{{item.name}}</li>              
            </ul>
        </div>

        <div class="rightselect">
            <ul >
                <li v-if="lang=='en'" class="en_li" v-for="(item,index) in classify_detail" :key="index" @click="gotoResult(index)">{{item.name}}</li>   
                <li v-if="lang=='zh'"  v-for="(item,index) in classify_detail" :key="index" @click="gotoResult(index)">{{item.name}}</li>              
            </ul>
            <div class="nolist" v-if="lang=='zh'&&datalength == 0">没有更多数据</div>
            <div class="nolist" v-if="lang=='en'&& datalength == 0 ">no more data</div>
        </div>
    </div>
</template>
<script>
import { getSecondType ,getFirstType} from "@/api/search"
import {Toast} from 'vant';
export default {
    name:'classify',
    //声明组件
    components:{
        [Toast.name]:Toast,
    },
    data (){
        return{
            lang:'zh',//语言环境
            userId:0,//用户ID
            categoryId:0,//一级分类的ID
            number:0,  //选择该分类
            classify:[],  //二级子目录
            classify_detail:[],  //三级子目录
            datalength:0,//三级子目录的长度
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获取用户ID
        this.getUserId();
        //获取语言环境
        this.getLang();
        //获取分类ID
        //获取到分类ID就调用 获取二级目录
        this.getCategrayId();
        
    },
    //监听
    watch:{

    },
    //计算属性
    computed:{

    },
    methods:{
        //获取用户ID
    	getUserId(){
            if(this.$route.query.userId && this.$route.query.userId > 0){
    			this.userId = this.$route.query.userId;
    		}else{
                //获取缓存内的用户ID
                this.userId = window.localStorage.getItem("userId");
            }
        },
        //获取语言环境
        getLang(){
            if(this.$route.query.lang){
    			this.lang = this.$route.query.lang;
    		}
        },
        //获取一级目录的id
        getCategrayId(){
            if(this.$route.query.id && this.$route.query.id > 0){
                this.categoryId = this.$route.query.id;
                this.getSecondType();
    		}
        },
        //切换分类
        selectStyle (_index){
            this.number = _index;
            this.classify = [];
            this.getSecondType();
        },
        //获取2级分类和三级分类
        getSecondType(){
            getSecondType(this.categoryId,this.lang).then(res=>{
				if(res.code==200){
					if(res.data.length > 0){
                        var list = res.data;
                        for(let i =0 ;i< res.data.length;i++){
                            let param = {};
                            param.name = list[i].name;
                            param.id = list[i].id;
                            this.classify = this.classify.concat(param);
                        }
                        this.classify_detail = list[this.number].childrenList;
                        this.datalength = this.classify_detail.length;
					}else{
                        //Toast("暂无内容")
                    }
                }else{
                    Toast(res.msg)
                }
            });
        },
        //跳转到结果页
        gotoResult(index){
            let para = {};
            para.title = this.classify_detail[index].name;
            para.url = "/classifyDetail?userId="+this.userId + "&lang="+this.lang + "&id="+this.classify_detail[index].id;
            this.interaction.hLink(para);
        },
    }
    
}
</script>

<style lang="stylus" scoped>
*{
    box-sizing :border-box;
}
.nolist{
        width :100%;
        height :auto;
        padding: 1.333333rem ;
        text-align :center;
        font-family: PingFangSC-Regular;
        font-size: 0.373333rem;
        color: #a2a2a2;
        letter-spacing: 0.008rem;
    }
#classify{
    height :100%;
    .leftselect{
        width:32%;
        height :100%;
        float :left;
        .active{
            background-color :#fff;
            border-left :.08rem solid #cb9c57;
            color :#cb9c57;

        }
        li{
            width :100%;
            height :1.28rem;
            line-height :1.28rem;
            text-align :center;
            font-family:PingFangSC-Regular;
            font-size:.346667rem;
            color:#494949;
            letter-spacing:.004267rem;
            text-align:center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .rightselect{
        width:68%;
        height :100%;
        background-color :#fff;
        float :left;
        li{
            width :33%;
            height :1.28rem;
            line-height :1.28rem;
            float :left;
            font-family:PingFangSC-Regular;
            font-size:.32rem;
            color:#494949;
            letter-spacing:.003733rem;
            text-align:center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .en_li{
            width :50%;
        }
    }
}
</style>


